歷經前兩天的後端部署示範，終於也到了前端的部署了，這篇文章會介紹如何將 Next.js 的前端部署到 Vercel。

前端部署的選擇

前端部署的方式有很多，參考以下表格：

Vercel

Vercel 是一個極受歡迎的前端部署和託管平台，它提供了一個簡單易用的界面，使得開發者能夠快速地將他們的前端應用程式部署到生產環境。以下是 Vercel 的一些主要特點：

• 無縫集成：Vercel 能夠無縫集成 GitHub、GitLab 和 Bitbucket，使得開發者能夠輕易地將他們的程式碼庫連接到 Vercel，並自動部署新的更改。
• 即時預覽：每當你推送新的程式碼到你的程式碼庫時，Vercel 會自動為你建立一個新的預覽連結，讓你能夠在生產環境中看到你的更改效果。
• 效能優化：Vercel 會自動優化你的前端資源，包括圖像優化、JS/CSS 最小化和 CDN 加速，以確保你的網站能夠以最快的速度載入。
• 伺服器渲染和靜態網站生成：Vercel 是 Next.js 的官方託管平台，它提供完全的支援，包括伺服器端渲染（SSR）、靜態網站生成（SSG）和 API 路由。

透過 Vercel，開發者能夠快速且容易地將他們的前端專案部署到線上，並且享受到許多現代的前端開發工具和優化功能。

Import Git Repository

進到 Vercel 官網 後，直接點擊「Start Deploying」。

接下來我們會選擇最簡單的方式，也就是直接從 GitHub 拉取專案。

分別有 GitHub、GitLab、Bitbucket，這邊選擇 GitHub。
接下來會做一個登入驗證的動作，如果你已經登入過 GitHub 的話，就會直接看到以下的畫面：

然後就選擇要部署上去的專案，這裡以 qrcode-nextjs 為例。

Configure Project

這裡可以做一些設定，Vercel 會自動判別你的專案是什麼框架，例如這裡就顯示是 Next.js。
大部分的設定都不用特別調整，但是因為我們的專案有使用環境變數，所以這裡就要記得在 Environment Variables 加上 key 跟 value，然後按下 Add 按鈕，最後按下 Deploy 按鈕，如下圖所示：

然後就會開始做 Deploy 的動作，大約幾分鐘後就會完成。

看到 Congratulations! 的字樣就代表你的前端專案部署成功了。

後續需要注意的事項

到了這個挑戰的最後一天，我們已經完成了一個完整的前後端分離的專案，雖然這個專案的功能很簡單，不過後續還是要一些需要注意並且要做的事情。

現在部署在 Vercel 的前端，相信如果有實際試用的朋友，應該可以發現是沒辦法正常呼叫 API 的。這是因為目前使用的 API 是 http，而 Vercel 為了安全性，所以只能使用 https 的 API。

不過要將 AWS EC2 的 API 改成 https 還需要蠻多篇幅介紹，這部分我應該會在之後的文章繼續介紹，再請大家關注我的部落格了。

總結

經歷這 30 天的挑戰，我們也算是符合主題「sideproject30」了，學習了很多想要玩的技術，並且實際做出來還滿有趣的，雖然這 30 天以來每天睡眠時間大概都不足，我家的貓都會在我半夜做專案寫文章的時候一直叫，彷彿叫我快睡了，但是這 30 天的挑戰還是很值得的。

附上這次做的專案連結：
Next.js 前端
Rust 後端